import { useTheme } from '../context/ThemeContext';
import { ReplyForm } from '../types/forms';

interface ReplyFormViewProps {
    reply: ReplyForm;
    onEdit?: () => void;
    onDelete?: () => void;
    canEdit?: boolean;
}

const ReplyFormView: React.FC<ReplyFormViewProps> = ({ 
    reply, 
    onEdit, 
    onDelete,
    canEdit = false 
}) => {
    const { theme } = useTheme();

    return (
        <div style={{ marginBottom: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                <h3 style={{ color: theme === 'light' ? '#666' : '#ccc', margin: 0 }}>回复内容</h3>
                {canEdit && (
                    <div style={{ display: 'flex', gap: '10px' }}>
                        <button
                            onClick={onEdit}
                            style={{
                                padding: '8px 16px',
                                backgroundColor: '#28a745',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            修改
                        </button>
                        <button
                            onClick={onDelete}
                            style={{
                                padding: '8px 16px',
                                backgroundColor: '#dc3545',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            删除
                        </button>
                    </div>
                )}
            </div>
            <div style={{
                backgroundColor: theme === 'light' ? '#f5f5f5' : '#3a3f44',
                padding: '15px',
                borderRadius: '4px'
            }}>
                <div style={{ marginBottom: '10px' }}>
                    <strong>回复人：</strong> {reply.responder}
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <strong>回复内容：</strong>
                    <p style={{ whiteSpace: 'pre-wrap', marginTop: '5px' }}>
                        {reply.responseContent}
                    </p>
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <strong>问题类别：</strong> {reply.questionCategory}
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <strong>备注：</strong>
                    <p style={{ whiteSpace: 'pre-wrap', marginTop: '5px' }}>
                        {reply.remarks}
                    </p>
                </div>
                <div>
                    <strong>状态：</strong> {reply.isClosed ? '已结案' : '未结案'}
                </div>
            </div>
        </div>
    );
};

export default ReplyFormView; 